<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill-opacity=".8" d="M99.991 50.943C99.488 78.123 77.3 100 50 100 22.386 100 0 77.614 0 50S22.386 0 50 0c22.287 0 41.168 14.581 47.624 34.724l-13.08 4.196c-4.548-15.023-18.501-25.96-35.009-25.96-20.2 0-36.574 16.376-36.574 36.575 0 20.2 16.375 36.574 36.574 36.574 19.816 0 35.951-15.759 36.556-35.428l13.9.262Z" clip-rule="evenodd" fill-rule="evenodd" data-follow-fill="#3DA3FF" :fill="_fill"/><path d="M32.784 52.9c.107.587.347 1.04.72 1.36.387.307.9.46 1.54.46.827 0 1.427-.34 1.8-1.02.374-.693.56-1.853.56-3.48-.306.427-.74.76-1.3 1-.546.24-1.14.36-1.78.36-.853 0-1.626-.173-2.32-.52a4.013 4.013 0 0 1-1.62-1.58c-.4-.707-.6-1.56-.6-2.56 0-1.48.44-2.653 1.32-3.52.88-.88 2.08-1.32 3.6-1.32 1.894 0 3.227.607 4 1.82.787 1.213 1.18 3.04 1.18 5.48 0 1.733-.153 3.153-.46 4.26-.293 1.107-.806 1.947-1.54 2.52-.72.573-1.706.86-2.96.86-.986 0-1.826-.187-2.52-.56-.693-.387-1.226-.887-1.6-1.5a4.76 4.76 0 0 1-.62-2.06h2.6Zm2.12-3.6c.694 0 1.24-.213 1.64-.64.4-.427.6-1 .6-1.72 0-.787-.213-1.393-.64-1.82-.413-.44-.98-.66-1.7-.66s-1.293.227-1.72.68c-.413.44-.62 1.027-.62 1.76 0 .707.2 1.287.6 1.74.414.44 1.027.66 1.84.66Zm7.16.22c0-2.307.413-4.113 1.24-5.42.84-1.307 2.227-1.96 4.16-1.96 1.933 0 3.313.653 4.14 1.96.84 1.307 1.26 3.113 1.26 5.42 0 2.32-.42 4.14-1.26 5.46-.827 1.32-2.207 1.98-4.14 1.98-1.933 0-3.32-.66-4.16-1.98-.827-1.32-1.24-3.14-1.24-5.46Zm8.04 0c0-.987-.067-1.813-.2-2.48-.12-.68-.373-1.233-.76-1.66-.373-.427-.933-.64-1.68-.64-.747 0-1.313.213-1.7.64-.373.427-.627.98-.76 1.66-.12.667-.18 1.493-.18 2.48 0 1.013.06 1.867.18 2.56.12.68.373 1.233.76 1.66.387.413.953.62 1.7.62s1.313-.207 1.7-.62c.387-.427.64-.98.76-1.66.12-.693.18-1.547.18-2.56Zm4.57-3.52c0-1.013.293-1.807.88-2.38.6-.573 1.366-.86 2.3-.86.933 0 1.693.287 2.28.86.6.573.9 1.367.9 2.38 0 1.027-.3 1.827-.9 2.4-.587.573-1.347.86-2.28.86-.934 0-1.7-.287-2.3-.86-.587-.573-.88-1.373-.88-2.4Zm12.84-3-7.86 14h-2.72l7.84-14h2.74Zm-9.68 1.44c-.734 0-1.1.52-1.1 1.56 0 1.053.366 1.58 1.1 1.58.36 0 .64-.127.84-.38.2-.267.3-.667.3-1.2 0-1.04-.38-1.56-1.14-1.56Zm5.62 9.54c0-1.027.293-1.82.88-2.38.6-.573 1.366-.86 2.3-.86.933 0 1.686.287 2.26.86.586.56.88 1.353.88 2.38s-.294 1.827-.88 2.4c-.574.573-1.327.86-2.26.86-.947 0-1.714-.287-2.3-.86-.587-.573-.88-1.373-.88-2.4Zm3.16-1.56c-.76 0-1.14.52-1.14 1.56 0 1.053.38 1.58 1.14 1.58.746 0 1.12-.527 1.12-1.58 0-1.04-.374-1.56-1.12-1.56Z" data-follow-fill="#3DA3FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626504 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
